<template>
	<view class="flex flex-col h-screen">
		<view class="top">
			<uni-nav-bar title="牌阵" fixed color="#fff" statusBar backgroundColor="transparent" :border="false"
				left-icon="left" @clickLeft="back"></uni-nav-bar>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="flex justify-between p-20 bg-white rounded-md" :class="{'mt-20': idx != 0}" @click="handleGoCardDetail(item)"
						v-for="(item, idx) in cardList" :key="idx">
						<text class="text-[#666666] text-xs font-bold">{{item.name}}</text>
						<ImageBoxVue src="/static/test/icon_right.png" width="12rpx" height="20rpx"></ImageBoxVue>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi'
	
	const id = ref('')
	const cardList = ref([])
	
	const getList = () => {
		testApi.getCardtypeLoadDecklist({
			"cardtype.id": id.value
		}).then((res) => {
			cardList.value = res.data
		})
	}
	
	onLoad((option) => {
		id.value = option.id;
	})
	
	onShow(() => {
		getList();
	})
	
	const handleGoCardDetail = (item) => {
		uni.navigateTo({
			url: `/pages/test/cardDetail?id=${item.id}`
		})
	}
	
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.top {
		background: url(/static/test/bg_card.png) no-repeat;
		background-size: cover;
		width: 750rpx;
		height: 520rpx;
	}
</style>